import React , {  Component } from 'react';
import { activeTodo } from "./Actions.js";
import PropTypes from 'prop-types';

class TodoItem extends Component{
    constructor(props, context){
        super(props, context);
        this.onActive = this.onActive.bind(this);
        this.state={
            active:false
        }
    };

    onActive(event){
        let value = event.target.checked;
        this.setState({
            active:value
        });
        this.context.store.dispatch(activeTodo(this.props.item.index));
    }

    render(){
        let item = this.props.item;
        return(
            <div className={this.props.class}>
                <div className="todo-lists">
                    <div className="todo-lists-left">
                        <div className="todo-lists-what">
                            {item.text}
                        </div>
                        <div className="todo-lists-where">
                            {item.place}
                        </div>
                        <div className="todo-lists-when">
                            {item.time}
                        </div>
                    </div>
                    <div className="todo-lists-right">
                        <input type="checkbox" checked={this.state.active} onChange={this.onActive} className="todo-lists-check" />
                    </div>
                </div>
            </div>
        )
    }
}

TodoItem.contextTypes = {
    store: PropTypes.object
};

export default TodoItem;